<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5 WebSocket Demo</title>
</head>
<body>
<div>
  <div>
    <span>发送消息：</span>
    <label>
      <input id="sender"/>
    </label>
    <button onclick="send()">发送</button>
  </div>
  <div>
    <span>收到消息：</span>
    <span id="receiver"></span>
  </div>
</div>
<script>
  const socket = new WebSocket('ws://127.0.0.1:8080/ws');
  socket.onopen = function(event) {
    console.log('Connected to the server');
  };

  socket.onmessage = function(event) {
    document.getElementById("receiver").innerText=event.data;
    console.log('Received message:', event.data);
  };

  socket.onerror = function(error) {
    console.error('Error:', error);
  };

  socket.onclose = function(event) {
    console.log('Connection closed');
  };

  function send(){
    let message = document.getElementById("sender").value;
    socket.send(message);
  }
</script>
</body>
</html>